<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p{
            color:red;
            margin-left:20px;
            display:inline-block;
        }
        .c{
            color:red;
            margin-left:4px;
            display:inline-block;
        }
        .l{
            font-size:18px;
        }
        .d{
            height:35px;
            width:300px;
            display:inline;
        }
        .i{
            height:30px;
            width:300px;
        }


    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div style="height:80px;"></div>
    <form enctype="multipart/form-data">
        <div style="width:500px;float:left;margin:0 20px;">
            <div style="font-size:28px;">otp</div>
            <br/>
            <span class="p">*</span>
            <label for="telphone"  class="l">手机👌:</label>
            <div style="height:35px;width:300px;position:relative;display:inline;">
                <input id="telphone" type="text" style="height:30px;width:250px;padding-right:50px;">
                <span style="position:absolute;right:18px;top:2px;background-image:url(user.ico);height:16px;width:16px;display:inline-block;" ></span>
            </div>
            <br/><br/>

            <input type="submit" id="getOtp" value="获取验证码" style="margin-left:100px;height:30px;width:300px;background-color:red;display:inline-block;"/>
        </div>
    </form>
<script>

    $("#getOtp").on("click",function () {
        var telphone = $("#telphone").val()
        $.ajax({
            type:"POST",
            contentType:"application/x-www-form-urlencoded",
            url:"http://localhost:8090/user/getOtp",
            xhrFields: {withCredentials: true},
            data:{
                "telphone":telphone
            },
            success: function (data) {
                if(data.status==="success"){
                    alert("otp 已经发送")
                    window.location.href="register.html"
                }else {
                    alert("otp 发送失败"+ data.data.errMsg)
                }
            },
            error:function (data) {
                alert("otp 发送失败"+ data.responseText)
            }
        })
        return false

    })


</script>

</body>
</html>
